<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{baseui/head :: head}">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="牧中智慧畜牧大数据云平台"/>
    <meta name="author" content="牧中(上海)物联网科技有限公司"/>
    <link rel="shortcut icon" href="/webjars/images/favicon.png"/>
    <link rel="stylesheet" href="/webjars/js/layui/css/layui.css" media="all">
    <title>牧中智慧畜牧大数据云平台V1.0</title>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

</head>
<body style="background-color:#fff">
<!--顶部一级导航-->
<th:block th:replace="baseui/topheader :: topheader(2)"/>

<!--平台管理菜单-->
<div id="topnav" th:replace="management/partial/topnav :: topnav(2)"></div>


<div id="cl-wrapper">
    <!--左边导航-->
    <th:block th:replace="management/partial/factory_left:: nav(31)"/>
    <div id="context" data-toggle="context" data-target="#context-menu">
        <div class="page-aside app tree">
            <div class="fixed nano nscroller">
                <div class="content">
                    <div class="header">
                        <button class="navbar-toggle" data-target=".treeview" data-toggle="collapse" type="button">
                            <span class="fa fa-chevron-down"></span>
                        </button>
                        <h2 class="page-title">组织机构</h2>
                        <p class="description">Administrative division</p>
                    </div>
                    <input id="hidArea" hidden="hidden" value="310000000000"/>
                    <input id="hidName" hidden="hidden" value="上海市"/>

                    <ul class="nav nav-list treeview collapse">
                        <li><label class="tree-toggler nav-header" id="city" onclick="subordinate('310000000000')"><i
                                class="fa fa-folder-o"></i><span id="310000000000" level="1"> 上海市</span></label>
                            <ul class="nav nav-list tree" th:each="area:${cityList}">
                                <li>
                                    <label class="tree-toggler nav-header" id="region"
                                           th:onclick="'javascript:subordinate('+${area.areaCode}+')'"><i
                                            class="fa fa-folder-o"></i>
                                        <span th:id="${area.areaCode}" th:value="${area.areaCode}"
                                              th:text="${area.areaName}" level="2"></span>
                                    </label>
                                    <ul class="nav nav-list tree"></ul>
                                </li>

                            </ul>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
    <div class="row" style="margin-top: 20px">
        <div class="from-group" style="margin-left: 310px">
            <div class="col-sm-2" style="width: 280px;height: 500px;">
                <div class="header">
                    <h3>组织机构管理</h3>
                </div>
                <div class="content">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">

                            <button style="margin-left: 60px" type="button" class="btn btn-default" id="addOrg"
                                    onclick="add()">添加单位
                            </button>

                            <button type="button" class="btn btn-default" id="addDepart">添加部门</button>

                        </div>
                        <hr/>
                        <div class="form-group">

                            <button style="margin-left: 60px" type="button" class="btn btn-default" id="update">编辑
                            </button>


                            <button style="margin-left: 50px" type="button" class="btn btn-default" onclick="del()">删除
                            </button>

                        </div>
                        <div>

                            <div class="content" style="height: 300px;">
                                <table class="no-border">
                                    <tbody class="no-border-x no-border-y" id="body"></tbody>

                                </table>
                            </div>


                        </div>
                    </form>
                </div>
            </div>
            <div class="col-sm-2" style="width: 500px;height: 500px;">
                <div class="block-flat">
                    <div class="header">
                        <h3>单位详情</h3>
                    </div>
                    <div class="content">
                        <input id="orgId" value="" hidden="hidden"/>

                        <input id="orgType" value="" hidden="hidden"/>
                        <table class="no-border">
                            <tbody class="no-border-y">
                            <tr>
                                <td style="width:30%;">机构名称</td>
                                <td id="organName"></td>

                            </tr>
                            <tr>
                                <td style="width:30%;">上级机构</td>
                                <td id="govName"></td>

                            </tr>
                            <tr>
                                <td style="width:60%;">机构类型</td>
                                <td id="type"></td>

                            </tr>
                            <tr>
                                <td style="width:60%;">机构负责人(上级机构负责人)</td>
                                <td id="Name"></td>

                            </tr>
                            <tr>
                                <td style="width:60%;">机构联系人(上级机构联系人)</td>
                                <td id="Name2"></td>

                            </tr>
                            <tr>
                                <td style="width:60%;">联系方式(上级机构联系方式)</td>
                                <td id="Mobile"></td>

                            </tr>
                            <tr>
                                <td style="width:60%;">登记人数(上级机构登记人数)</td>
                                <td id="size"></td>

                            </tr>

                            <tr>
                                <td style="width:60%;">备注</td>
                                <td id="Extra"></td>

                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div id="context-menu2">
        <ul class="dropdown-menu" role="menu">
            <!--<li><a tabindex="-1">添加新节点</a></li>
            <li><a tabindex="-1">添加子节点</a></li>
            <li><a tabindex="-1">删除</a></li>
            <li><a tabindex="-1">重命名</a></li>-->
        </ul>
    </div>
</div>
<script type="text/javascript" src="/webjars/js/jquery.js"></script>
<script type="text/javascript" src="/webjars/js/jquery.gritter/js/jquery.gritter.js"></script>

<script type="text/javascript" src="/webjars/js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
<script type="text/javascript" src="/webjars/js/behaviour/general.js"></script>
<script src="/webjars/js/jquery.ui/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript" src="/webjars/js/jquery.nestable/jquery.nestable.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.switch/bootstrap-switch.min.js"></script>
<script type="text/javascript"
        src="/webjars/js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="/webjars/js/jquery.select2/select2.min.js" type="text/javascript"></script>
<script src="/webjars/js/skycons/skycons.js" type="text/javascript"></script>
<script src="/webjars/js/bootstrap.slider/js/bootstrap-slider.js" type="text/javascript"></script>
<script type="text/javascript" src="/webjars/js/jquery.niftymodals/js/jquery.modalEffects.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.summernote/dist/summernote.min.js"></script>


<script type="text/javascript" src="/webjars/js/jquery.magnific-popup/dist/jquery.magnific-popup.min.js"></script>


<script src="/webjars/js/behaviour/voice-commands.js"></script>
<script src="/webjars/js/bootstrap/dist/js/bootstrap.min.js"></script>

<script type="text/ecmascript" src="/webjars/jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/ecmascript" src="/webjars/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="/webjars/js/laydate/laydate.js"></script>
<script src="//vuejs.org/js/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="/webjars/js/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //initialize the javascript
        App.init();
        bangding();

    });
</script>
<script type="text/javascript">
    // Demo 3
    var demo;
    $('#context').contextmenu({
        target: '#context-menu2',
        before: function (e) {
            demo = $(e.target);
        },
        onItem: function (context, e) {
            if ($(e.target).text() == '添加新节点') {
                if (demo.get(0).tagName == 'A') {
                    demo.parent().after("<li><a href='#'>新节点</a></li>");
                } else {
                    demo.parent().parent().after("<li><a href='#'>新节点</a></li>");
                }

            } else if ($(e.target).text() == '添加子节点') {
                if (demo.get(0).tagName == 'A') {
                    demo.after("<ul class='nav nav-list tree'></ul>");
                    var demo2 = demo.next();
                    demo.parent().prop("class", "open");
                    var str = "<label class='tree-toggler nav-header'><i class='fa fa-folder-open-o'></i>" + demo.text() + "</label>";
                    $(str).replaceAll(demo);
                    demo2.append("<li><a href='#'>新节点</a></li>");
                    binding();
                } else {
                    demo.next().append("<li><a href='#'>新节点</a></li>");
                }
            } else if ($(e.target).text() == '删除') {
                if (demo.get(0).tagName != "A") {
                    alert("非空");
                } else {
                    var demo4 = demo.parent();
                    var demo2 = demo.parent().parent().prev();
                    var demo3 = demo.parent().parent().parent();
                    demo.parent().remove();
                    if (demo2.next().children().length == 0) {
                        demo2.next().remove();
                        demo2.children("input:first-child").remove();
                        var str = demo2.text();
                        demo3 = "<a href='#'>" + str + "</a>";
                        $(demo3).replaceAll(demo2);
                    }
                }
            } else {
                var name = prompt("请输入名字", "")
                if (name != null && name != "") {
                    if (demo.get(0).tagName == 'A') {
                        demo.text(name);
                    } else {
                        demo.text(name);
                        demo.prepend("<i class='fa fa-folder-open-o'></i>");
                    }

                }
            }


        }
    });


    bangding = function () {
        $('label.tree-toggler').unbind("click");
        $('label.tree-toggler').click(function () {
            var icon = $(this).children(".fa");
            if (icon.hasClass("fa-folder-o")) {
                icon.removeClass("fa-folder-o").addClass("fa-folder-open-o");
            } else {
                icon.removeClass("fa-folder-open-o").addClass("fa-folder-o");
            }

            $(this).parent().children('ul.tree').toggle(300, function () {
                $(this).parent().toggleClass("open");
                $(".tree .nscroller").nanoScroller({preventPageScrolling: true});
            });

        });
    }

    function subordinate(id) {
        $("#hidArea").val(id);
        var name = $("#" + id).text();
        $("#hidName").val(name);
        var demo = $("#" + id);
        var areaCode = id;
        var lev = demo.attr("level");
        $.ajax({
            type: "GET",
            url: "/management/organization/organization",
            data: {
                areaCode: areaCode,
                level: lev
            },
            dataType: "json",
            success: function (data) {
                if (lev < 5) {
                    var demo2 = demo.parent().next();
                    demo2.html("");
                }
                $("#body").html("");
                $.each(data["area"], function (index, item) {
                    /*<span th:value="${area.areaCode}" th:text="${area.areaName}" level="2"></span>*/
                    var str = "";
                    if (lev < 5) {
                        if (lev < 4) {
                            str += "<li><label class='tree-toggler nav-header' id='village' onclick='subordinate(" + item.areaCode + ")'>" +
                                "<i class='fa fa-folder-o'></i>" +
                                "<span id='" + item.areaCode + "' level='" + item.areaLevel + "'>" + item.areaName + "</span></label>" +
                                "<ul class='nav nav-list tree'>" +
                                "</ul></li>"
                        } else {
                            str += "<li> <a href='javascript:void(0)' id='" + item.areaCode + "'  level='" + item.areaLevel + "' onclick='subordinate(" + item.areaCode + ")'>" + item.areaName +
                                "</a></li>"
                        }
                        demo2.append(str);
                    }
                })
                /*"<tr>"+
                 "<td style='text-align: center;'><a href='javascript:void(0)'>Filet Mignon</a></td>"+
                 "</tr>"*/
                /* if (data["1"].length > 0) {
                 var str = "";
                 $.each(data["1"], function (index, item) {
                 str += "<tr>" +
                 "<td style='text-align: center;'><a href='javascript:void(0)' onclick='breed(" + item.id + ")'>" + item.name + "</a></td>" +
                 "</tr>";
                 })
                 $("#body").append(str);
                 }*/
                if (data["3"].length > 0) {
                    var str = "";
                    $.each(data["3"], function (index, item) {

                        str += "<tr>" +
                            "<td style='text-align: center;'><a href='javascript:void(0)' onclick='breed(" + item.id + ")'>" + item.name + "</a></td>" +
                            "</tr>";
                        if (data[item.name] != null) {
                            $.each(data[item.name], function (index2, item2) {
                                str += "<tr>" +
                                    "<td style='text-align: center;'><a href='javascript:void(0)' onclick='depart(" + item2.id + ")'>" + item2.name + "</a></td>" +
                                    "</tr>";
                            })
                        }
                    })
                    $("#body").append(str);
                }
                bangding();
            }
        });
    }

    function breed(id) {
        $("#orgType").val(1);
        $("#orgId").val(id);
        $.ajax({
            type: "GET",
            url: "/management/organization/showOrgan",
            data: {
                id: id
            },
            dataType: "json",
            success: function (data) {
                $("#organName").html(data["organName"]);
                $("#govName").html(data["govName"]);
                $("#type").html(data["type"]);
                $("#Name").html(data["Name"]);
                $("#Name2").html(data["Name"]);
                $("#Mobile").html(data["Mobile"]);
                $("#size").html(data["size"]);
            }
        });
    }


    function depart(id) {
        $("#orgType").val(2);
        $("#orgId").val(id);
        $.ajax({
            type: "GET",
            url: "/management/organization/showDepart",
            data: {
                id: id
            },
            dataType: "json",
            success: function (data) {
                $("#organName").html(data["departName"]);
                $("#govName").html(data["organName"]);
                $("#type").html(data["type"]);
                $("#Name").html(data["Name"]);
                $("#Name2").html(data["Name"]);
                $("#Mobile").html(data["Mobile"]);
                $("#size").html(data["size"]);
            }
        });
    }


    function del() {
        var type = $("#orgType").val();
        layui.use(['laypage', 'layer'], function () {
            var $ = layui.jquery, layer = layui.layer;

            var id = $("#orgId").val();

            if (id == "" || type == "") {
                alert('请选择组织');
                return false;
            }
            layer.confirm('确认要删除机构信息吗? 删除后不可恢复。', {
                btn: ['确认', '取消']

            }, function (index, layero) {

                var postData = {
                    id: id,
                    type: type
                };

                $.ajax({
                    type: "POST",
                    url: "/management/organization/del",
                    data: postData,
                    dataType: "json",
                    success: function (data) {
                        if (data) {
                            layer.msg('信息删除成功!', {icon: 1, time: 2000,});
                            window.location.reload();
                        } else {
                            layer.msg('信息删除失败!', {icon: 1, time: 2000,});
                        }

                    }
                });
            }, function (index) {
                layer.close();
            });
        })
    }

    function add() {
        layui.use(['laypage', 'layer'], function () {
            var $ = layui.jquery, layer = layui.layer;
            var code = $("#hidArea").val();
            var areaName = $("#hidName").val();
            layer.confirm('确认要在' + areaName + '下添加？',
                {
                    btn: ['确认', '取消']

                }, function (index, layero) {

                    layer.open({
                        type: 2,
                        // skin: 'layui-layer-lan',
                        area: ['800px', '500px'],
                        title: '增加政府机构',
                        content: ['/management/organization/add', 'no'],
                        success: function (layero, index) {
                            var body = layer.getChildFrame('body', index);
                            var iframeWin = window[layero.find('iframe')[0]['name']];
                            body.find("#areaCode").val(code);
                        },
                        btn: ['增加', '取消'],
                        btn1: function (index, layero) {
                            var body = layer.getChildFrame('body', index);
                            var iframeWin = window[layero.find('iframe')[0]['name']];
                            var data = {
                                organizationName: body.find("#organization").val(),
                                userId: body.find("#name").val(),
                                areaCode: code
                            }
                            var a = false;
                            for (var key in data) {
                                if (data[key] == null || data[key] == "") {
                                    a = true;
                                    break;
                                }
                            }

                            if (!a) {
                                layer.msg('请再次查看信息是否有误', {
                                    time: 5000, //5s后自动关闭
                                    btn: ['确定', '取消'],
                                    btnAlign: 'c',
                                    btn1: function (index, layero) {
                                        $.ajax({
                                            type: "POST",
                                            url: "/management/organization/doAdd",
                                            data: data,
                                            dataType: "json",
                                            success: function (data) {


                                                if (data) {
                                                    layer.msg('增加政府机构成功', {
                                                        btn: '确定',
                                                        time: 5000,
                                                        btnAlign: 'c',
                                                        area: ['150px', '100px'],
                                                        btn1: function (index, layero) {
                                                            window.location.href = "/management/organization/department";
                                                        }
                                                    });

                                                } else {
                                                    layer.msg('增加政府机构失败', {
                                                        btn: '确定',
                                                        time: 5000,
                                                        btnAlign: 'c',
                                                        area: ['150px', '100px']
                                                    });
                                                }

                                            }

                                        });

                                    }

                                });


                            } else {
                                body.find("#message").text("表单不能为空");
                            }


                        }

                    });


                }, function (index) {
                    layer.close();
                });
        })
    }
    $("#addDepart").click(function addDepart() {
        layui.use(['laypage', 'layer'], function () {
            var $ = layui.jquery, layer = layui.layer;

            var type = $("#orgType").val();
            var organId = $("#orgId").val();
            var organName = $("#organName").text();
            if (organName == "") {
                alert('请选择政府机构');
                return false;
            }
            if (type == 2) {
                alert("请选择政府机构");
                return false;
            }
            layer.confirm('确认要在' + organName + '下添加部门？',
                {
                    btn: ['确认', '取消']

                }, function (index, layero) {

                    layer.open({
                        type: 2,
                        // skin: 'layui-layer-lan',
                        area: ['800px', '500px'],
                        title: '增加机构部门',
                        content: ['/management/organization/addDepart', 'no'],
                        success: function (layero, index) {
                            var body = layer.getChildFrame('body', index);
                            var iframeWin = window[layero.find('iframe')[0]['name']];

                            body.find("#hidId").val(organId);
                        },
                        btn: ['增加', '取消'],
                        btn1: function (index, layero) {
                            var body = layer.getChildFrame('body', index);
                            var iframeWin = window[layero.find('iframe')[0]['name']];
                            var departName = body.find("#departName").val();
                            var type = body.find("#type").val();
                            if (departName == "") {
                                alert("请输入部门名称！");
                                return false;
                            }
                            if (type == 0) {
                                alert("请选择部门职责！");
                                return false;
                            }

                            var data = {
                                departName: departName,
                                type: type,
                                governmentId: organId
                            }
                            var a = false;
                            for (var key in data) {
                                if (data[key] == null || data[key] == "") {
                                    a = true;
                                    break;
                                }
                            }

                            if (!a) {
                                layer.msg('请再次查看信息是否有误', {
                                    time: 5000, //5s后自动关闭
                                    btn: ['确定', '取消'],
                                    btnAlign: 'c',
                                    btn1: function (index, layero) {
                                        $.ajax({
                                            type: "POST",
                                            url: "/management/organization/doAddDepart",
                                            data: data,
                                            dataType: "json",
                                            success: function (data) {


                                                if (data) {
                                                    layer.msg('增加部门成功', {
                                                        btn: '确定',
                                                        time: 5000,
                                                        btnAlign: 'c',
                                                        area: ['150px', '100px'],
                                                        btn1: function (index, layero) {
                                                            window.location.href = "/management/organization/department";
                                                        }
                                                    });

                                                } else {
                                                    layer.msg('增加部门失败', {
                                                        btn: '确定',
                                                        time: 5000,
                                                        btnAlign: 'c',
                                                        area: ['150px', '100px']
                                                    });
                                                }

                                            }

                                        });

                                    }

                                });


                            } else {
                                body.find("#message").text("表单不能为空");
                            }


                        }

                    });


                }, function (index) {
                    layer.close();
                });
        })
    })

    $("#update").click(function update() {
        layui.use(['laypage', 'layer'], function () {
            var $ = layui.jquery, layer = layui.layer;
            var type = $("#orgType").val();
            var organId = $("#orgId").val();
            var organName = $("#organName").text();
            if (organName == "") {
                alert('请选择机构');
                return false;
            }
            layer.confirm('确认要修改' + organName + '？',
                {
                    btn: ['确认', '取消']

                }, function (index, layero) {
                    layer.open({
                        type: 2,
                        // skin: 'layui-layer-lan',
                        area: ['800px', '500px'],
                        title: '修改机构信息',
                        content: ['/management/organization/update', 'no'],
                        success: function (layero, index) {
                            var body = layer.getChildFrame('body', index);
                            var iframeWin = window[layero.find('iframe')[0]['name']];

                            body.find("#organizationId").val(organId);
                            body.find("#organizationType").val(type);
                        },
                        btn: ['增加', '取消'],
                        btn1: function (index, layero) {
                            var body = layer.getChildFrame('body', index);
                            var iframeWin = window[layero.find('iframe')[0]['name']];
                            var organizationName = body.find("#organization").val();
                            var name = body.find("#name").val();
                            if (organizationName == "") {
                                alert("请输入部门名称！");
                                return false;
                            }
                            if (type == 1 && name == 0) {
                                alert("请选择负责人！");
                                return false;
                            }
                            if (type == 3 && name == 0) {
                                alert("请选择上级机构！");
                                return false;
                            }


                            var data = {
                                name: organizationName,
                                type: type,
                                userId: name,
                                id: organId
                            }
                            var a = false;
                            for (var key in data) {
                                if (data[key] == null || data[key] == "") {
                                    a = true;
                                    break;
                                }
                            }

                            if (!a) {
                                layer.msg('请再次查看信息是否有误', {
                                    time: 5000, //5s后自动关闭
                                    btn: ['确定', '取消'],
                                    btnAlign: 'c',
                                    btn1: function (index, layero) {
                                        $.ajax({
                                            type: "GET",
                                            url: "/management/organization/doUpdate",
                                            data: data,
                                            dataType: "json",
                                            success: function (data) {


                                                if (data) {
                                                    layer.msg('修改成功', {
                                                        btn: '确定',
                                                        time: 5000,
                                                        btnAlign: 'c',
                                                        area: ['150px', '100px'],
                                                        btn1: function (index, layero) {
                                                            window.location.href = "/management/organization/department";
                                                        }
                                                    });

                                                } else {
                                                    layer.msg('修改失败', {
                                                        btn: '确定',
                                                        time: 5000,
                                                        btnAlign: 'c',
                                                        area: ['150px', '100px']
                                                    });
                                                }

                                            }

                                        });

                                    }

                                });


                            } else {
                                body.find("#message").text("表单不能为空");
                            }


                        }

                    });
                }, function (index) {
                    layer.close();
                })
        })

    })
</script>

</body>
</html>
